<template>
	<div>
		<!-- 面包屑导航栏 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 模糊搜索框 -->
		<el-row>
			<!-- form表单行内表单 -->
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="状态:">
					<el-radio-group v-model="radio1" @change="Select">
						<el-radio-button label="all">全部商品</el-radio-button>
						<el-radio-button label="up">上架中</el-radio-button>
						<el-radio-button label="down">下架中</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="商品名称:">
					<el-input v-model="queryInfo.goodsName" placeholder="请输入商品名称"></el-input>
				</el-form-item>
				<el-form-item label="所属门店:">
					<el-input v-model="queryInfo.shopName" placeholder="请输入所属门店"></el-input>
				</el-form-item>
				<el-form-item label="发布日期:">
					<div class="block">
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getGoods">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<!-- 表格内容 -->
		<el-table :data="list" border style="width: 100%;margin-top: 20px;"
			:header-cell-style="{backgroundColor:'#eee'}" show-overflow-tooltip>
			<el-table-column prop="goodsId" label="商品ID" align="center">
			</el-table-column>
			<el-table-column prop="goodsName" label="商品" width="180" align="center">
			</el-table-column>
			<el-table-column prop="goodsShopName" label="所属门店" width="180" align="center">
			</el-table-column>
			<el-table-column prop="goodsSalesVolume" label="销量" align="center">
			</el-table-column>
			<el-table-column prop="goodsPresentPrice" label="预估价" align="center">
			</el-table-column>
			<el-table-column prop="addTime" label="发布时间" align="center">
			</el-table-column>
			<el-table-column prop="goodsStatus" label="状态" align="center">
				<template slot-scope="scope">
					<span :style="{  backgroundColor: scope.row.goodsStatus === 1 ? '#E7FAF0' : '#FFEDED', color: scope.row.goodsStatus === 1 ? '#13CE66' : '#FF4949', padding: '5px 10px' }
					">
						{{ scope.row.goodsStatus === 1 ? '上架中' : '已下架' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<!-- <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button> -->
					<el-button type="text" @click="upORdown(scope.row)">
						<template>
							{{ scope.row.goodsStatus === 1 ? '立即下架' : '立即上架' }}
						</template>
					</el-button>
				</template>
			</el-table-column>
			</el-table-column>
		</el-table>
		<el-row>
			<div class="block">
				<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]"
					:page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-row>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					goodsName: '',
					goodsStatus: '',
					shopName: '',
					startTime: '',
					endTime: ''
				},
				total: 0, // 总数据条数
				// 使用数组来保存日期范围，仅用于内部状态同步
				date: '',
				list: [],
				radio1: 'all',
				goodsData: {},
			}
		},
		methods: {
			// 处理每页条数变化
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.getGoods(this.queryInfo.pageNum, val);
			},
			// 处理当前页码变化  
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.getGoods(val, this.queryInfo.pageSize);
			},
			//	获取表格数据
			getGoods(pageNum = 1, pageSize = 10) {
				this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/goods?action=selectAll', {
						params: this.queryInfo
					})
					.then((res) => {
						console.log(res);
						this.total = res.data.data.total
						this.list = res.data.data.list
						// console.log(res.data.data.list);
					})
			},
			//	上下架切换
			upORdown(row) {
				row.goodsStatus = row.goodsStatus === 1 ? 0 : 1
				this.goodsData = row
				this.$http({
						method: "post",
						url: "http://10.10.18.156:8089/panghudaojiaBackend/goods?action=update",
						params: {
							addOrUpdateFlag: 2,
							goodsStatus: this.goodsData.goodsStatus,
							goodsId: this.goodsData.goodsId
						}
					})
					.then(res => {
						if (res.status == 200) {
							this.$message.success("操作成功")
							this.getGoods()
						} else {
							this.$message.error("操作失败")
						}
					})
			},
			//	状态绑定事件
			Select(val) {
				if (val == 'up') {
					this.queryInfo.goodsStatus = 1
				} else if (val == 'down') {
					this.queryInfo.goodsStatus = 0
				} else {
					this.queryInfo.goodsStatus = ''
				}
				console.log('xixix');
				this.getGoods()
			}
		},
		//	记载表格信息
		mounted() {
			this.getGoods()
		},
		watch: {
			//	要求名称必须和变量名保持一致
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
		}
	}
</script>

<style>
</style>